<template>
  <div class="vote-item">
    <div class="vote-item-title">
      <router-link :to="'/wx/i/votes-'+$route.params.id" tag="div" replace class="title-left">
        <div class="title-icon">
          <i class="van-icon van-icon-arrow-left"></i>
        </div>
        <div class="title-left-cont">
          返回
        </div>
      </router-link>
      排名
    </div>
    <div class="vote-item-cont">
      <Scroll ref="item">
        <div class="rank-table-out">
          <table>
            <tr>
              <th>排名</th>
              <th>名称</th>
              <th>票数</th>
            </tr>
            <tr v-for="(t,i) in rankData">
              <td v-text="i+1"></td>
              <td v-text="t.name"></td>
              <td v-text="t.poll"></td>
            </tr>
          </table>
        </div>
      </Scroll>
    </div>

  </div>
</template>

<script>
  import { Icon, Tab, Tabs, Button, Search, Actionsheet, Panel, Popup, Waterfall, Swipe, SwipeItem, Field, Cell, CellGroup, Loading, Toast } from 'vant'
  import vueWaterfallEasy from 'components/vue-waterfall-easy.vue'
  import Scroll from 'base/scroll/scroll'
  import FormBlock from 'components/form-block'
  import VueQiniuUpload from 'components/vue-qiniu-upload'
  import * as api from '@/api/api'

  export default {
    name: 'voteRank',
    data () {
      return {
        rankData: []
      }
    },
    methods: {
      init () {
        api.get({
          url: '/vote/user/getRank',
          data: {voteId: this.$route.params.id},
          success: data => {
            this.rankData = data.data
          }
        })
      }
    },
    computed: {},
    created () {
    },
    mounted () {
      this.init()
    },
    watch: {},
    directives: {
      WaterfallLower: Waterfall('lower')
    },
    components: {Icon, Tab, Tabs, Button, vueWaterfallEasy, Scroll, Search, Actionsheet, Panel, Popup, Waterfall, Swipe, SwipeItem, Field, Cell, CellGroup, FormBlock, Loading, VueQiniuUpload, Toast}
  }
</script>

<style lang="scss" scoped>
  // 报名
  .vote-item {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f8f8;
    &-title {
      height: 44px;
      line-height: 44px;
      border-bottom: 1px #ededed solid;
      text-align: center;
      font-size: 17px;
      position: relative;
      .title-left {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        text-align: left;
        padding-left: 15px;
        min-width: 50px;
        .title-icon {
          display: inline-block;
          height: 44px;
          vertical-align: middle;
        }
        .title-left-cont {
          display: inline-block;
          height: 44px;
        }
      }
    }
    &-cont {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      bottom: 0;
      .panel-out {
        margin-top: 10px;
        .panel-cont {
          padding: 10px 15px;
          img {
            width: 100%;
            line-height: 1;
          }
        }
      }

    }
  }

  .vote-button {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .rank-table-out {
    padding: 15px;
    table {
      width: 100%;
      tr {
        height: 25px;
      }
      th {
        font-size: 15px;
      }
      td {
        text-align: center;
        font-size: 14px;
      }
    }
  }


</style>
